<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Container Family: Using the Container ARIA Plugin</title>
    

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/container/container-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

	/* Default/unfocused Panel style */
	.yui-skin-sam div[role=panel].yui-panel .hd {
		background: #F2F2F2;
	}

	/* Focused Panel style */	
	.yui-skin-sam .yui-panel-container.focused div[role=panel].yui-panel .hd {
		background: url(http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/sprite.png) repeat-x 0 -200px;
	}
	
	/*
		The Container ARIA Plugin removes the "href" attribute from the <A> used to create the 
		close button for a Panel, resulting in the focus outline no longer be rendered in 
		Gecko-based browsers when the <A> element is focused.  For this reason, it is necessary to 
		restore the focus outline for the <A>.
	*/	
	a.container-close[role=button]:focus {
		outline: dotted 1px #000;
	}

	/*
		Necessary to explicitly set the text-align property so the content of the Panels 
		is aligned properly when viewed inside the YUI Examples chrome.
	*/
	#panel-2,
	#panel-3 {
		text-align: left;
	}
	
</style>

<script type="text/javascript" src="../container/assets/containerariaplugin.js"></script>
<!--end custom header content for this example-->


<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
	YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="vs" type="hidden" value="yuiblog.com">
		<div id="sitesearch">
			<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			<input type="text" id="searchinput" name="p">
			<input type="submit" value="Search" id="searchsubmit" class="ygbt">
		</div>
		</form>	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" height="38"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Container Family: Using the Container ARIA Plugin</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">

    
	<div class="promo">
	<h1>Container Family: Using the Container ARIA Plugin</h1>
	
	<div class="exampleIntro">
	<p>
The Container ARIA Plugin makes it easy to use the 
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> with the Container
family of controls.
Using the ARIA plugin, Dialogs, Alerts and Tooltips created using the Container family are 
more interoperable with assistive technologies (AT), such as screen readers, making them more 
accessible to users with disabilities.
</p>
<p>
<a href="http://video.yahoo.com/watch/3608783/9955344">Watch a screen cast of this example 
running in Firefox 3 with the NVDA screen reader</a>, to see immediately the benefits that 
ARIA provides, or 
<a href="http://www.nvda-project.org/wiki/Snapshots">download the latest development snapshot of 
NVDA</a> to test this example for yourself.
</p>			
	</div>	
					
	<div class="example-container module ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="container-ariaplugin_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->		
		</div>		<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<script type="text/javascript">

	(function () {
	
		var Event = YAHOO.util.Event,
			Dom = YAHOO.util.Dom;


		Event.onDOMReady(function () {

			var oPanel1 = new YAHOO.widget.Panel("panel-1", {
				
				visible: false,
				fixedcenter: true,
				constraintoviewport: true,
				width: "300px"
			
			});
			
			oPanel1.render();
			
			Event.on("show-dialog-1", "click", oPanel1.show, null, oPanel1);


			var oTooltip1 = new YAHOO.widget.Tooltip("tooltip-1", { 
				context:"show-dialog-1", 
				text:"Shows a Dialog built using Panel from existing markup.",
				iframe: true,
				showDelay:500 } );


			var oPanel2 = new YAHOO.widget.Dialog("panel-2", {
				
				modal: true,
				visible: false,
				fixedcenter: true,
				constraintoviewport: true,
				width: "300px",
				postmethod: "form"
			
			});	

			oPanel2.render(document.body);

			Event.on("show-dialog-2", "click", oPanel2.show, null, oPanel2);	


			var oTooltip2 = new YAHOO.widget.Tooltip("tooltip-2", { 
				context:"show-dialog-2", 
				text:"Shows a Modal Dialog built using Dialog from existing markup.",
				iframe: true,
				showDelay:500 } );


			var handleOK = function() {
				this.cancel();
			};
			
			var oPanel3 = new YAHOO.widget.SimpleDialog("panel-3", {
				
				modal: true,
				icon: YAHOO.widget.SimpleDialog.ICON_INFO,
				visible: false,
				fixedcenter: true,
				constraintoviewport: true,
				width: "300px",
				role: "alertdialog",
				buttons: [ { text:"OK", handler:handleOK, isDefault:true } ],
				text: "Your changes have been saved."
			
			});	

			oPanel3.setHeader("Info");
			oPanel3.render(document.body);

			var oTooltip3 = new YAHOO.widget.Tooltip("tooltip-3", { 
				context:"show-dialog-3", 
				text:"Shows a Modal Dialog built using SimpleDialog using the ARIA role of alertdialog.",
				iframe: true,
				showDelay:500 } );
			
			Event.on("show-dialog-3", "click", oPanel3.show, null, oPanel3);					

		});
	
	}());

</script>

<button id="show-dialog-1">Show Dialog 1</button>
<button id="show-dialog-2">Show Dialog 2</button>
<button id="show-dialog-3">Show Dialog 3</button>

<form name="panel-1-form" id="panel-1-form" method="post">
<div id="panel-1">
	<div class="hd">Personal Information</div>
	<div class="bd">
		<div>
			<label for="panel-1-first-name" id="panel-1-first-name-label">First Name</label>
			<input type="text" id="panel-1-first-name" name="first-name">
		</div>
		<div>
			<label for="panel-1-last-name">Last Name</label>
			<input type="text" id="panel-1-last-name" name="last-name">
		</div>	
		<div>
			<label for="panel-1-email">Email</label>
			<input type="text" id="panel-1-email" name="email">
		</div>		
		<div>
			<input type="submit" id="panel-1-button-1" name="button-1" value="Submit">
		</div>
	</div>
</div>
</form>


<div id="panel-2">
	<div class="hd">Personal Information</div>
	<div class="bd">
		<form name="panel-2-form" id="panel-2-form" method="post">
			<div>
				<label for="panel-2-first-name" id="panel-2-first-name-label">First Name</label>
				<input type="text" id="panel-2-first-name" name="first-name">
			</div>
			<div>
				<label for="panel-2-last-name">Last Name</label>
				<input type="text" id="panel-2-last-name" name="last-name">
			</div>	
			<div>
				<label for="panel-2-email">Email</label>
				<input type="text" id="panel-2-email" name="email">
			</div>
			<div>
				<input type="submit" id="panel-2-button-1" name="button-1" value="Submit">
			</div>
		</form>
	</div>
</div>
		
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2>Getting Started</h2>
<p>
Using the Container ARIA Plugin is easy.  Simply include the source file(s) for the ARIA plugin 
after the Container source files as indicated on the Container landing page.
</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- Source file -->
<script type="text/javascript" src="../container/assets/containerariaplugin.js"></script>
</textarea>

<p>
All YUI ARIA Plugins require the user's browser and AT support the WAI-ARIA Roles and States.  
Currently only <a href="http://www.mozilla.com/en-US/firefox/">Firefox 3</a> and 
<a href="http://www.microsoft.com/windows/products/winfamily/ie/ie8/getitnow.mspx">Internet Explorer
8</a> have support for ARIA, and are supported by several screen readers for 
Windows that also offer support for ARIA.  For this reason the YUI ARIA Plugins are only enabled 
by default for these browsers.  To enable the ARIA plugin for other browsers, simply the set 
the <code>usearia</code> configuration property to <code>true</code>.  For example:
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var oPanel = new YAHOO.widget.Panel("panel-1", {
	
	visible: false,
	fixedcenter: true,
	constraintoviewport: true,
	width: "300px",
	usearia: true

});
</textarea>

<h2>Plugin Features</h2>
<h3>Enhancements to Module and Overlay</h3>
<h4>IFrames Automatically Hidden from AT</h4>
<p>
Both the Module and Overlay widgets make use of iframes &#8212; Module for the purpose of 
publishing the <code>textResize</code> Custom Event, and Overlay provides an iframe shim to 
prevent <code>&#60;select&#62;</code> from poking through Overlay instances.  In both cases 
the iframe elements are hidden from the user using CSS.  To ensure these iframes also remain
hidden from AT, the Container ARIA Plugin sets the <code>role</code> attribute of each iframe to
<a href="http://www.w3.org/TR/wai-aria/#presentation"><code>presentation</code></a> and sets 
their <code>tabIndex</code> attribute to <code>-1</code>.
</p>

<h4>Visible State Communicated to AT</h4>
<p>
All Container widgets inherit a <code>visible</code> configuration property from Module.  To 
ensure that the visible state is properly conveyed to AT, the Container ARIA Plugin automatically
toggles the <a href="http://www.w3.org/TR/wai-aria/#hidden"><code>aria-hidden</code></a> 
attribute to the correct value when the value of the <code>visible</code> configuration property
is changed.
</p>

<h4>The <code>labelledby</code> and <code>describedby</code> Configuration Properties.</h4>
<p>
The Container ARIA Plugin adds a <code>labelledby</code> and <code>describedby</code>
configuration properties to the Menu class, each of which maps back to their respective ARIA 
property of <a href="http://www.w3.org/TR/wai-aria/#labelledby"><code>aria-labelledby</code></a> 
and <a href="http://www.w3.org/TR/wai-aria/#describedby"><code>aria-describedby</code></a>.
</p>


<h3>Enhancements to Panel</h3>
<p>
The Container ARIA Plugin adds a <code>role</code> configuration property to Panel that is set to
<code>dialog</code> by default. Authors using Panel (or any of its subclasses) to replace
JavaScript alerts, should set the <code>role</code> configuration property to 
<code>alertdialog</code>.  As an additonal convenience, the Container ARIA Plugin automatically 
sets the value of the <code>labelledby</code> configuration property to a Panel's header element.  
</p>

<p>
The Container ARIA Plugin adds some keyboard enhancements to Panel:  
Pressing the Esc key will automatically hide a Panel instance, or in the case of Dialog, call 
the <code>cancel</code> method.  Each Panel is also automatically registered with an OverlayManager
instance, and listens for the DOM focus and blur events so that Panels are automatically focused 
and blurred accordingly by the OverlayManager.  Lastly, when a Panel instance is hidden, focus
is automatically returned to the element in the DOM that was focused before the Panel was made
visible.
</p>


<h3>Enhancements to Tooltip</h3>
<p>
The Container ARIA Plugin enhances Tooltip such that each DOM element defined as a Tooltip 
instance's trigger has its 
<a href="http://www.w3.org/TR/wai-aria/#describedby"><code>aria-describedby</code></a> 
attribute automatically set to the Tooltip's id.  Additionally, when a Tooltip is automatically 
shown and hidden as it's trigger(s) are focused and blurred.
</p>


<h3>Enhanced Keyboard Support</h3>
<p>
In keeping with the 
<a href="http://www.w3.org/WAI/PF/aria-practices/#keyboard">WAI-ARIA Best Practices for keyboard 
navigation</a> the ARIA plugin for Menu enhances Menu's default behavior such that 
only one MenuItem is in the browser's tab index, enabling the user to easily tab into and out of the 
Menu.  When a MenuItem in a Menu has focus, pressing the arrow keys moves focus between each 
MenuItem in the Menu.
</p>


<h2>Screen Reader Testing</h2>
<p>
Two of the leading screen readers for Windows, 
<a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a> and 
<a href="http://www.gwmicro.com/Window-Eyes/">Window-Eyes</a>, support ARIA.  Free, trial 
versions of both are available for download, but require Windows be restarted every 40 minutes.
The open-source 
<a href="http://www.nvda-project.org/">NVDA Screen Reader</a> is the best option for developers as 
it is both free and provides excellent support for ARIA.
</p>
<h2>Configuration for This Example</h2>

<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers.  <a href="http://developer.yahoo.com/yui/articles/hosting/?dragdrop&container&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>

				</div>
				<div class="yui-u">
						<div id="loggerModule" class="yui-skin-sam">
						<h3 class="firstContent">YUI Logger Output:</h3>
								<div id="loggerGloss"><p><strong>Note:</strong> Logging and debugging is currently turned off for this example.</p> 
							<p class="loggerButton"><span id="loggerLink"><span class="first-child"><a href="container-ariaplugin_log.html">Reload with logging<br />
	 and debugging enabled.</a></span></span></p></div>
	
						</div>
					
				
					<div id="examples">
						<h3>Container Family Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../container/module.html'>The Module Control</a></li><li><a href='../container/overlay.html'>Creating and Positioning an Overlay</a></li><li><a href='../container/tooltip.html'>Simple Tooltip Example</a></li><li><a href='../container/tooltip-multi.html'>One Tooltip, Many Context Elements</a></li><li><a href='../container/panel.html'>Simple Panel Example</a></li><li><a href='../container/panelskin1.html'>Skinning a Panel with Custom CSS: Introduction</a></li><li><a href='../container/panelskin2.html'>Skinning a Panel with Custom CSS: Advanced</a></li><li><a href='../container/panel-loading.html'>Creating a Modal "Loading" Panel</a></li><li><a href='../container/panel-resize.html'>Creating a Resizable Panel</a></li><li><a href='../container/dialog-quickstart.html'>Dialog Quickstart Example</a></li><li><a href='../container/simpledialog-quickstart.html'>SimpleDialog Quickstart Example</a></li><li><a href='../container/container-effect.html'>Using ContainerEffect Transitions</a></li><li><a href='../container/overlaymanager.html'>Using the Overlay Manager to Manage Multiple Panels</a></li><li><a href='../container/keylistener.html'>Implementing Container Keyboard Shortcuts with KeyListener</a></li><li><a href='../button/button-ariaplugin.html'>Using the Button ARIA Plugin (included with examples for Button Control)</a></li><li class='selected'><a href='../container/container-ariaplugin.html'>Using the Container ARIA Plugin</a></li><li><a href='../button/button-menu-select.html'>Using A Menu Button To Replace A &#60;select&#62; Element (included with examples for Button Control)</a></li><li><a href='../button/button-menu-swap.html'>Replacing the content of a Button's Menu (included with examples for Button Control)</a></li><li><a href='../colorpicker/colorpicker-dialog-from-script.html'>Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control)</a></li><li><a href='../layout/panel_layout.html'>Layout inside a resizable Panel (included with examples for Layout Manager)</a></li><li><a href='../editor/dialog_editor.html'>Editor in a Dialog Control (included with examples for Rich Text Editor)</a></li><li><a href='../button/btn_example07.html'>Menu Buttons (included with examples for Button Control)</a></li><li><a href='../calendar/calcontainer.html'>Popup Calendar - Advanced (included with examples for Calendar Control)</a></li><li><a href='../datatable/dt_colshowhide.html'>Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)</a></li><li><a href='../button/btn_example08.html'>Split Buttons (included with examples for Button Control)</a></li><li><a href='../button/btn_example09.html'>Simple Calendar Menu Button (included with examples for Button Control)</a></li><li><a href='../button/btn_example10.html'>Calendar Menu Button with Date on Button Face (included with examples for Button Control)</a></li><li><a href='../button/btn_example11.html'>Color Picker Button (included with examples for Button Control)</a></li><li><a href='../button/btn_example12.html'>Fixed Width Menu Button (included with examples for Button Control)</a></li><li><a href='../menu/programsmenu.html'>OS-Style Programs Menu (included with examples for Menu Family)</a></li><li><a href='../menu/applicationmenubar.html'>Application Menubar (included with examples for Menu Family)</a></li><li><a href='../button/btn_example14.html'>Slider Button (included with examples for Button Control)</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager)</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Container Family Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/container/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_container.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/container.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="selected "><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
